//<script src="./js/jquery-3.6.0.js"></script>
// 做rem适配,使用"浏览器宽度 / 80 + 'px'" 公式得到html的字号
// 浏览器窗口改变大小时,自动计算这个值 封装起来调用函数
// 计算font-size 值
function setFont() {
  // 获取HTML宽度
  let htmlWidth = document.querySelector('html').clientWidth
  // 判断 宽度小于1024 也是1024 大于1920时等于1920
  if (htmlWidth < 1024) htmlWidth = 1024
  if (htmlWidth > 1920) htmlWidth = 1920
  // 计算字号
  let fontSize = htmlWidth / 80 + 'px'
  // 然后把值给html元素
  document.querySelector('html').style.fontSize = fontSize
}
setFont() // 页面刷新时调用计算

// 窗口改变大小事件
window.onresize = function () {
  setFont() // 窗口改变大小调用函数自动计算字号
  myChart1.resize()
  myChart2.resize()
}
let a = []
let b = []
let c = []
  // 渲染表格
  ; (function () {
    $('.btn').on('click', function () {
      let uname = $('.uname').val()
      let score = $('.grade').val()
      let salary = $('.pay').val()
      a.push(uname)
      b.push(score)
      c.push(salary)
      let str
      if (uname !== '' && score !== '' && salary !== '') {
        str = `
                <tr>
                    <td>${uname}</td>
                    <td>${score}</td>
                    <td>${salary}</td>
                </tr>
            `
        $('table').append(str)
        $('input').val('')
        xian()
        zhu()
      }
    })
  })()

  // 折线图
  ; function xian() {
    myChart1 = echarts.init($('.right .top')[0])
    let option = {
      grid: {
        top: '5%',
        right: '3%',
        bottom: '3%',
        left: '0%',    // 是否包含文本    containLabel: true,
        // 显示边框
        show: true,
        // 边框颜色
        borderColor: 'rgba(0, 240, 255, 0.3)',
        // 网格整体,包括坐标轴的文字
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#00fffb' // 0% 处的颜色
              }, {
                offset: 1, color: '#0061ce' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
        },
      },
      xAxis: [{
        type: "category",
        boundaryGap: true,
        axisLabel: {
          fontSize: 14,
          textStyle: {
            color: "#19a3df"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#19a3df"
          }
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false
        },
        data: a
      }],

      yAxis: [
        {
          boundaryGap: false,
          type: "value",
          name: '评分',
          axisLabel: {
            fontSize: 14,
            textStyle: {
              color: "#19a3df"
            }
          },

          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#19a3df"
            }
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [{
        name: "评分",
        type: "line",
        smooth: true,
        // smooth: true,
        // showSymbol: true,
        // symbolSize: 8,
        // zlevel: 3,
        itemStyle: {
          color: '#19a3df',
          borderColor: "#a3c8d8"
        },
        lineStyle: {
          normal: {
            width: 6,
            color: "#19a3df",
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [{
                offset: 0,
                color: "rgba(30,150,167,0)"
              },
              {
                offset: 1,
                color: "#19a3df"
              }
              ],
            ),
          }
        },
        data: b
      }]
    };
    myChart1.setOption(option)
  }


// 柱状图
; function zhu() {
  myChart2 = echarts.init($('.right .bottom')[0])
  let option = {
    grid: {
      top: '5%',
      right: '3%',
      bottom: '3%',
      left: '0%',    // 是否包含文本    containLabel: true,
      // 显示边框
      show: true,
      // 边框颜色
      borderColor: 'rgba(0, 240, 255, 0.3)',
      // 网格整体,包括坐标轴的文字
      containLabel: true,
    },
    textStyle: {
      fontSize: 0,
    },
    color: ["#00FCFF", "#FFDF1C", "#5AB72C", "#FF715A", "#2F9BFF"],
    xAxis: {

      axisLabel: {
        color: "#19a3df",//X轴文字
        fontSize: 14,
        interval: 0
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: "#19a3df",
        },
        show: true
      },
      data: a,
      type: "category"
    },
    yAxis: {
      type: 'value',
      name: '薪资',
      axisLabel: {
        color: "#19a3df",//Y轴文字
        fontSize: 14
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false,

      },
      axisLine: {
        lineStyle: {
          color: "#19a3df",
        },
        show: true
      },
    },
    series: [{
      data: c,
      type: "bar",
      barMaxWidth: "auto",
      barWidth: 20,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          // type: "linear",
          global: false,
          colorStops: [{
            offset: 0, color: '#00fffb' // 0% 处的颜色
          }, {
            offset: 1, color: '#0061ce' // 100% 处的颜色
          }],
        }
      },
    },],
    tooltip: {
      trigger: 'item',  //item 放在柱子上触发 axis-在大范围内就会触发
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line'-线 | 'shadow'-阴影 
      }
    },
  }
  myChart2.setOption(option)
}